<template>
  <div class="seach">
    <div class="seach_header">
      <div class="seach_header01">
        <img :src="img01" alt="">
        <input type="text" placeholder="搜索商品" v-model="keywords" @keyup="seach">
      </div>
      <span class="seach_quxiao" @click="quxiao">取消</span>
    </div>

    <ul class="seach_list" v-show="seachlist">
      <li v-for="item in seachlist"><tmp :list='item'></tmp></li>
    </ul>
  </div>
</template>

<script>
import tmp from './productlist.vue'
import img01 from '../common/images/search.png'
const axios = require('axios')
export default {
  data () {
    return {
      img01,
      keywords: '',
      page: 1,
      pagesize: 8,
      seachlist: ''
    }
  },
  methods: {
    quxiao () {
      this.$router.go(-1)
      this.seachlist = ''
    },
    seach (idx) {
      if (idx.keyCode == 13) {
        var urls = 'searchGoods' + '/keywords/' + this.keywords + '/page/' + this.page + '/pagesize/' + this.pagesize
        console.log(urls)
        axios.post('/api/' + urls).then(e => {
          console.log(e)
          this.seachlist = e.data.data
        })
      }
    }
  },
  components: {
    tmp
  }
}
</script>

<style>
input::-webkit-input-placeholder {
  line-height: 0.6rem;
  font-size: 0.16rem;
  color: #666666;
}
input:-moz-placeholder {
  line-height: 0.6rem;
  font-size: 0.16rem;
  color: #666666;
}
input:-ms-input-placeholder {
  line-height: 0.6rem;
  font-size: 0.16rem;
  color: #666666;
}
.seach{
  min-height: 15rem;
  background-color: #f3f3f3;
}
.seach_header{
  width: 6.9rem;
  height: 0.8rem;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem 0.3rem;
}
.seach_header01{
  width: 6rem;
  height: 0.6rem;
  border-radius: 0.4rem;
  background-color: #ffffff;
  display: flex;
  align-items: center;
}
.seach_header01 img{
  width: 0.36rem;
  margin-left: 0.2rem;
}
.seach_header01 input{
  width: 5rem;
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.16rem;
  outline: none;
  margin-left: 0.2rem;
}
.seach_quxiao{
  font-size: 16px;
  color: #999999;
}
.seach_list{
  padding: 0.3rem;
  width: 6.9rem;
  height: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background-color: #ffffff;
  margin-top: 0.3rem;
}
.seach_list li{
  margin-bottom: 0.3rem;
}
.seach_list li:nth-child(2n){
  margin-left: 0.9rem;
}
</style>
